<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vnode与diff算法</title>
</head>
<body>
    <h1>1.Vnode：</h1>
    <p style="text-indent: 2em;">
        所谓虚拟DOM，是一个用于表示真实 DOM 结构和属性的 JavaScript 对象，这个对象用于对比虚拟 DOM 和当前真实 DOM 的差异化，然后进行局部渲染从而实现性能上的优化。
    </p>   
   
    <h1>2.分析diff：</h1>
    <p style="text-indent: 2em;">
        diff算法源自于：linux的基本命令，对比文本。vue和react的虚拟DOM的diff算法大致相同，其核心是基于两个简单的假设：1. 两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。2. 同一层级的一组节点，他们可以通过唯一的id进行区分。
    </p> 
    <p style="text-indent: 2em;">
        优化新旧虚拟dom树比较效率，
    </p> 
    </br>
    <h1>
        vue和react的虚拟DOM的diff算法大致相同，其核心是基于两个简单的假设：1. 两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。2. 同一层级的一组节点，他们可以通过唯一的id进行区分。
    </h1>
    </br>
    <h1>3.react实现的diff是同层级比较</h1>
    <p style="text-indent: 2em;">
        由于web UI中跨级移动操作非常少、可以忽略不计，所以react实现的diff是同层级比较
    </p> 
    
</body>
</html>